{% extends "page.html" %}

{% block content %}
<div class="box">
    <h3 class="box-title">效果数据</h3>
    <div class="box-bd">
        <div class="grid grid-zebra">
            <table>
                <colgroup>
                    <col width="20%" />
                    <col width="20%" />
                    <col width="20%" />
                    <col width="20%" />
                    <col width="20%" />
					</colgroup>
                <thead>
                    <tr>
                        <th></th>
                        <th>展现量</th>
                        <th>点击量</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>昨日</th>
                        <td>{{pv30|last}}</td>
                        <td>{{click30|last}}</td>
                    </tr>
                    <tr>
                        <th>平均每日</th>
                        <td>{{pv_history.avg}}</td>
                        <td>{{click_history.avg}}</td>
                    </tr>
                    <tr>
                        <th>历史累计</th>
                        <td>{{pv_history.sum}}</td>
                        <td>{{click_history.sum}}</td>
                    </tr>
                    <tr class="row-strong">
                        <th>最高纪录</th>
                        <td>{{pv_history.max}}</td>
                        <td>{{click_history.max}}</td>
                    </tr>
                    <tr>
                        <th>发生在</th>
                        <td>{{pv_history.day_max}}</td>
                        <td>{{click_history.day_max}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="box">
    <h3 class="box-title">效果趋势图（最近2周）</h3>
    <div class="box-bd">
        <div id="J_ChartPv" style="width: 950px; height: 300px; "></div>
        <div id="J_ChartClick" style="width: 950px; height: 300px; "></div>
    </div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="static/js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="static/js/highcharts/modules/exporting.js"></script>
<script>
(function(){
    $(document).ready(function() {
        function chart(id,title,data,color){
            return new Highcharts.Chart({
                chart: {
                    renderTo: id,
                    defaultSeriesType: 'line',
                    marginRight: 50,
                    marginBottom: 50
                },
                title: {
                    text: '宝贝说效果报告 - ' + title,
                    x: -20 //center
                },
                subtitle: {
                    text: '来源: say.23201.com',
                    x: -20
                },
                xAxis: {
                    categories:  
                    {% autoescape off %}
                    {{stat_days}},
                    {% endautoescape %}
                },
                yAxis: {
                    min:0,
                    title: {
                        text: ''
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            this.x +': '+ this.y ;
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: [{
                    name: title,
                    color: color,
                    data: data                    
                }],
                exporting:{
                    enabled:false
                },
                legend:{
                    enabled:false
                }
            });
        }
        
        chart('J_ChartPv','展现量',{{pv30}},'#00a0e9');
        chart('J_ChartClick','点击量',{{click30}},'#83d160');
        
    });
})();
</script>
{% endblock %}
